<template>
  <div style="display: inline-block;">

    <el-form ref="form" :model="form"  :inline="true"  label-width="100px">
     <el-form-item   :label="label" prop="name"  >

       <el-input v-model="form.name"  :disabled="true" style="max-width: 480px;" >
          <template slot="append">
            <el-button   type="primary" @click="open=true" icon="el-icon-search">选择</el-button>
          </template>
        </el-input>

     </el-form-item>
    </el-form>



    <!-- 新增和修改对话框-->
    <el-dialog title="客户查询" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">
      <!-- 搜索区 -->
      <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">

        <el-form-item label="客户分类" prop="cusCateId">
          <el-select v-model="queryParam.cusCateId" placeholder="客户分类" clearable>
            <el-option
              v-for="dict in dict.type.customer_class"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>



        <el-form-item label="姓名" prop="name">
          <el-input v-model="queryParam.name" placeholder="请输入姓名" clearable style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="queryParam.phone" placeholder="请输入电话" clearable style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>



      <el-table :data="tableData.rows" border style="width: 100%"
       @row-click="singleElection"  highlight-current-row >
        <el-table-column align="center" width="55" label="选择">
           <template slot-scope="scope">
             <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
             <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio
             >
           </template>
         </el-table-column>
        <el-table-column prop="cusCateName" label="客户分类"  />
        <el-table-column prop="componeyName" label="公司名称"  />
        <el-table-column prop="name" label="联系人" />
        <el-table-column prop="genderName" label="性别"  />
        <el-table-column prop="birthday" label="出生日期"  />
        <el-table-column prop="phone" label="联系电话"  />
        <el-table-column prop="customerSourceName" label="客户来源"  />
      </el-table>

      <!-- 分页条 -->
      <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
        :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancelForm">关闭</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import {dataApi} from '@/api/info/customer.js'
  export default {
    mixins: [PageMixin],
    // 查询通用字典中的键
    dicts: ['customer_class'],
    props: {
      label: {
        type: String,
        default: ''
      },
      item: {
        type: Object
      }
    },
    data() {
      return {
        open: false,
        // 查询函数
        fetchDataApi: dataApi,
        primaryKey: 'id',
        form: {},
        templateSelection: undefined
      }
    },
    created(){
       console.log('--------customerTag')
       console.log(this.item)
       if(this.item){
         this.form= {
           id: this.item.id,
           name: this.item.name
         }
         this.templateSelection= this.form.id
       }
    },
    methods: {
      //单选
      singleElection(row) {
         this.form=row
      },
      // 关闭表单的时候
      cancelForm(){
        this.open =false
        this.$refs['queryForm'].resetFields();
        this.queryParam.page=1
        this.tableData = {
          total: 0,
          rows: []
        }
      },
      // 确认选中
      submitForm(){
        if(this.templateSelection){
          this.$emit('callback',this.form)
          this.cancelForm()
        }else{
           this.$message.error('请选择客户信息');
        }
      },
      //外部调用方法，清空表单的值
      clearForm(){
        this.templateSelection=undefined
        this.form={}
      }
    },
    watch: {
      item(newValue, oldValue) {
        if(this.item){
          this.form= {
            id: this.item.id,
            name: this.item.name
          }
          this.templateSelection= this.form.id
        }else{
          this.form= {}
          this.templateSelection=undefined
        }
      }
    },
  }
</script>

<style>
</style>
